数据可视化

2023-06-08 08:01| 来源: 网络整理| 查看: 265

华为云开发者联盟数据可视化--实验一：可视化开发环境及搭建数据可视化--实验一：可视化开发环境及搭建

数据可视化–实验一：可视化开发环境及搭建文章目录数据可视化--实验一：可视化开发环境及搭建概要实验过程Echarts.jspyechartsTableau概要学院：计算机科学与技术学院实验日期：2020-10-13实验目的：掌握并安装常用的可视化工具实验内容：从以下几类工具中选择3种，分别实现一个小案例的绘制：编程类工具：D3.js、Echarts.js、pyecharts(Python)、 P

BlingblingFu 2515人浏览 · 2021-01-01 17:48:38

BlingblingFu · 2021-01-01 17:48:38

声明：本文CSDN作者原创投稿文章，未经许可禁止任何形式的转载，原文链接

文章目录概要实验过程Echarts.jspyechartsTableau

概要

学院：计算机科学与技术学院

实验日期：2020-10-13

实验目的：掌握并安装常用的可视化工具

实验内容：从以下几类工具中选择3种，分别实现一个小案例的绘制：

编程类工具：D3.js、Echarts.js、pyecharts(Python)、 Processing、 R（至少选两种）交互式工具：Tableau、penRefine（至多选一种）数据任选实验过程

本次实验选择编程类工具Echarts.js和pyecharts，交互式工具Tableau。

Echarts.js

使用WebStorm新建Nodejs项目，并使用npm安装Echarts.js和Webpack

在app.js文件中编写逻辑代码，在index.html文件中编写样式代码。

app.js代码如下

/** * @name app.js * @author F * @Time 2020/10/13 18:49 * @description 数据可视化实验一：Echarts.js使用示例 */ var echarts = require('echarts'); // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 绘制图表 myChart.setOption({ title: { text: '数据可视化实验一' }, tooltip: {}, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [15, 20, 36, 10, 10, 20] }] });

index.html代码如下

DOCTYPE html> 数据可视化实验一执行webpack之后（执行方法见实验三最后）在浏览器中打开index.html，结果如下：

Echarts.js样例实验完成。

pyecharts 在Pycharm中新建Python项目，并使用pip安装pyecharts在main.py文件中编写逻辑代码，代码如下 #!/usr/bin/env python # coding:utf-8 """ Name : main.py Author : F Time : 2020/10/13 20:47 Desc : 数据可视化实验一：pyecharts使用实例 """ from pyecharts.charts import Bar bar = Bar() bar.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]) bar.add_yaxis('数据可视化实验一', [5, 20, 36, 10, 75, 90]) # render 会生成本地 HTML 文件，默认会在当前目录生成 render.html 文件 # 也可以传入路径参数，如 bar.render("mycharts.html") bar.render() 运行main.py文件，然后在浏览器中打开render.html文件，结果如下

pyecharts样例实验完成。